<!-- 综合评价 -->
<template>
  <div class="service-evaluation">
    <div class="tip">{{ currentData.tip }}</div>
    <el-form ref="ruleFormRef" :model="formData" class="demo-ruleForm">
      <el-form-item
        v-for="(item, itemindex) in list"
        :key="item.label"
        :label="`${itemindex + 1}.${item.label}`"
        :prop="item.prop || item.label"
        :rules="getRules(item)"
      >
        <el-input
          v-if="['input','textarea'].includes(item.type)"
          :type="item.type"
          v-model="formData[item.prop ? item.prop : item.label]"
          :autosize="{ minRows: 2}"
        />
        <el-radio-group
          v-if="item.type === 'radio'"
          v-model="formData[item.prop ? item.prop : item.label]"
        >
          <el-radio
            v-for="(ele, eleindex) in item.options"
            :key="itemindex + eleindex"
            :label="answerDict[eleindex]"
          >
            {{ answerDict[eleindex] }}.{{ ele }}
          </el-radio>
        </el-radio-group>
        <el-checkbox-group
          v-if="item.type === 'checkboxGroup'"
          v-model="formData[item.prop ? item.prop : item.label]"
        >
          <el-checkbox
            v-for="(ele, eleindex) in item.options"
            :key="itemindex + eleindex"
            :label="answerDict[eleindex]"
          >
            {{ answerDict[eleindex] }}.{{ ele }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
          class="submit-button"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
    <dialogCommon v-if="dialogVisible"></dialogCommon>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import dialogCommon from "../../components/dialogCommon.vue";
import { useRouter, useRoute } from "vue-router";

import ManageAPI from "@/api/manage";
import { useManageStore } from "@/stores";
const manageStore = useManageStore();
const route = useRoute();
const router = useRouter();

// 获取当前页面数据
const currentData = ref({});
watch(
  () => router.currentRoute.value,
  (newVal) => {
    const name = newVal.path.slice(1);
    currentData.value = GLOBAL_DICT.find((item) => item.name === name);
  },
  { immediate: true }
);

// 提交完成弹框
const dialogVisible = ref(false);

const ruleFormRef = ref();

const list = reactive(QUESTION);
const formData = reactive({
  browser: manageStore.userAgent,
  phone_number: "",
  user_type: "",
  result: "",
});
list.slice(3).forEach((item) => {
  formData[item.label] = item.type === "checkboxGroup" ? [] : "";
});
const answerDict = reactive(ANSWER_DICT);

const getRules = (item) => {
  if (item.prop === "phone_number") {
    return [
      { required: true, message: "请输入联系电话", trigger: "blur" },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "电话号码格式不正确",
        trigger: "blur",
      },
    ];
  } else {
    return [
      {
        required: true,
        message: ['input','textarea'].includes(item.type) ? "请输入" : "请选择",
      },
    ];
  }
};
// 提交
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log(formData, "submit!");
      const { browser, phone_number, user_type, result } = formData;
      const details = Object.keys(formData)
        .slice(4)
        .map((key, index) => {
          const value = formData[key];
          let item = {
            question_index: index, //题目序列
            answer_index: "", //答案序列，多个答案用逗号分隔
            answer_details: "", //题目序列
          };
          const fieldType = list.find((ele) => ele.label === key)?.type
          if (['input','textarea'].includes(fieldType)) {
            item.answer_details = value; //答案详情
          } else {
            item.answer_index = Array.isArray(value) ? value.join(",") : value; //答案序列，多个答案用逗号分隔
          }
          return item;
        });
      const type_ =
        GLOBAL_DICT.findIndex((item) => item.name === currentData.value.name) +
        1;
      let payload = {
        type_, //必传。评价类型：1-服务质量评价 2-执法过程评价 3-投诉处置评价 4-综合问卷
        browser,
        phone_number,
        // user_type和result答案为A,B,C,转换为1,2,3   result选A:满意,index是0, B:不满意index是1
        result: answerDict.indexOf(result) === 0 ? 1 : 0, //必传。评价结果：0-不满意 1-满意
        user_type: answerDict.indexOf(user_type) + 1, //用户身份：1-服务对象 2-周边群众 3-其他 type_为4时必传
        user_type_value: ["服务对象", "群众", "其他"][
          answerDict.indexOf(user_type)
        ], //用户身份说明 type_为4时必传
        details,
      };
      Object.assign(payload);
      ManageAPI.submitEval(payload)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("提交成功");
          } else {
            ElMessage.error(res.info);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
.service-evaluation {
  width: 100%;
  height: 100%;
  padding: 10% 15% 0 15%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: 1rem;
  .tip {
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
  .submit-button {
    width: 80%;
    border-radius: 2rem;
    height: 3rem;
    font-size: 1rem;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  :deep(.el-form-item) {
    margin-bottom: 2rem;
    flex-direction: column;
    .el-form-item__label {
      justify-content: flex-start;
      height: inherit;
      line-height: inherit;
      margin-bottom: 1rem;
    }
  }
  :deep(.el-radio) {
    margin: 0;
  }
  :deep(.el-form-item__label),
  :deep(.el-input),
  :deep(.el-radio__label),
  :deep(.el-checkbox__label) {
    font-size: 1rem;
  }
  :deep(.el-radio-group) {
    display: flex;
    flex-direction: column;
  }
  :deep(.el-radio-group) {
    align-items: initial;
    width: 100%;
  }
  :deep(.el-checkbox) {
    white-space: initial;
    // align-items: flex-start;
    margin-bottom: 1rem;
  }
}
</style>
